// 引入connect
import {connect} from "react-redux";
import React, { Component } from 'react';


import {
    createIncrementAction,
    createDecrementAction,
    createAsyncIncrementAction} 
from "../../redux/actions/count.js";


// 创建Count组件
class Count extends Component {
    state={
        carName:"长安univ-2.0T--亚光风暴灰"
    };
    increment=()=>{
        const {value}=this.selectNumber;
        this.props.increment(value*1);
    };
    decrement=()=>{
        const {value}=this.selectNumber;
        this.props.decrement(value*1);
    };
    incrementIfOdd=()=>{
        const {value}=this.selectNumber;
        if(this.props.count % 2 !== 0){
            this.props.increment(value*1);
        }
    };
    incrementAsync=()=>{
        const {value}=this.selectNumber;
        this.props.asyncIncrement(value*1,500);
    };
    render() {
        // console.log(this.props);
        return (
            <div>
                <h1>我是Count组件,下方组件的人数为:{this.props.personCount}</h1>
                <h2>当前求和为：{this.props.count}</h2>
                <select ref={(currentNode)=>{this.selectNumber=currentNode}}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当求和结果为基数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    };
};

export default connect(
    (state)=>{
        return {
            count:state.count,
            personCount:state.persons.length
        };
    },
    {
        increment:createIncrementAction,
        decrement:createDecrementAction,
        asyncIncrement:createAsyncIncrementAction
    }
)(Count);